'use client'

import { useState } from 'react'
import { Modal } from '../ui/Modal'
import { DeviceIcon } from '../icons/DeviceIcon'
import { DEVICE_TYPES, DeviceType } from '@/constants/deviceTypes'
import { 
  Dialog, 
  DialogContent, 
  DialogHeader, 
  DialogTitle, 
  DialogDescription 
} from '@/components/ui/dialog'

interface AddDeviceModalProps {
  isOpen: boolean
  onClose: () => void
  onAdd: (deviceData: any) => void
}

const deviceTypeOptions = Object.entries(DEVICE_TYPES).map(([id, info]) => ({
  id,
  name: info.name,
  description: info.description
}))

export default function AddDeviceModal({ isOpen, onClose, onAdd }: AddDeviceModalProps) {
  const [name, setName] = useState('')
  const [type, setType] = useState('LIGHT')
  const [step, setStep] = useState<'type' | 'details'>('type')

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onAdd({
      name,
      type,
      status: false,
      data: type === 'LIGHT' 
        ? { brightness: 100 } 
        : type === 'AC'
        ? { temperature: 25 }
        : type === 'CURTAIN'
        ? { position: 0 }
        : {}
    })
    setName('')
    setType('LIGHT')
    setStep('type')
    onClose()
  }

  const handleClose = () => {
    setStep('type')
    setName('')
    setType('LIGHT')
    onClose()
  }

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>添加设备</DialogTitle>
          <DialogDescription>
            请填写设备信息
          </DialogDescription>
        </DialogHeader>
        
        <div className="h-full flex items-center justify-center py-8">
          <div className="w-full px-8">
            <h2 className="text-2xl font-bold text-white/90 mb-8 text-center">添加设备</h2>
            
            {step === 'type' ? (
              <div className="space-y-6">
                <p className="text-lg text-white/60 text-center">选择要添加的设备类型</p>
                <div className="flex flex-wrap justify-center gap-6">
                  {deviceTypeOptions.map(deviceType => (
                    <button
                      key={deviceType.id}
                      onClick={() => {
                        setType(deviceType.id)
                        setStep('details')
                      }}
                      className={`w-[280px] p-6 rounded-xl border transition-all duration-200 flex flex-col items-center space-y-4
                        ${type === deviceType.id 
                          ? 'bg-primary-500/20 border-primary-500/50 text-white' 
                          : 'bg-white/5 border-white/10 text-white/70 hover:bg-white/10 hover:border-white/20'
                        }`}
                    >
                      <div className="w-16 h-16 rounded-full bg-primary-500/20 flex items-center justify-center">
                        <DeviceIcon type={deviceType.id} className="w-8 h-8 text-primary-400" />
                      </div>
                      <div className="text-center">
                        <div className="text-lg font-medium">{deviceType.name}</div>
                        <div className="text-sm text-white/50 mt-2">{deviceType.description}</div>
                      </div>
                    </button>
                  ))}
                </div>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-8">
                <div>
                  <label className="block text-sm font-medium text-white/80 mb-2">
                    设备名称
                  </label>
                  <input
                    type="text"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    className="input w-full text-lg py-3"
                    placeholder={`输入${deviceTypeOptions.find(t => t.id === type)?.name}名称`}
                    required
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-white/80 mb-2">
                    设备类型
                  </label>
                  <div className="p-6 rounded-xl bg-white/5 border border-white/10 flex items-center space-x-6">
                    <div className="w-16 h-16 rounded-full bg-primary-500/20 flex items-center justify-center">
                      <DeviceIcon type={type} className="w-8 h-8 text-primary-400" />
                    </div>
                    <div className="flex-1">
                      <div className="text-lg font-medium text-white">
                        {deviceTypeOptions.find(t => t.id === type)?.name}
                      </div>
                      <div className="text-sm text-white/50 mt-1">
                        {deviceTypeOptions.find(t => t.id === type)?.description}
                      </div>
                    </div>
                    <button
                      type="button"
                      onClick={() => setStep('type')}
                      className="ml-auto text-sm text-primary-400 hover:text-primary-300"
                    >
                      更改
                    </button>
                  </div>
                </div>

                <div className="flex justify-end space-x-4 pt-4">
                  <button
                    type="button"
                    onClick={() => setStep('type')}
                    className="btn btn-secondary px-6 py-3"
                  >
                    返回
                  </button>
                  <button
                    type="submit"
                    className="btn btn-primary px-6 py-3"
                    disabled={!name}
                  >
                    添加
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
} 